import React, {Component} from 'react';
import {withRouter} from 'react-router-dom'
import {Button, Modal} from 'antd'
import screenfull from 'screenfull'
import {connect} from 'react-redux'
import {createDeleteUserInfoAction} from '../../../redux/actions/login_action.js'
import dayjs from 'dayjs'
import {weather} from '../../../api/index.js'
import MenuData from '../../../config/menu-config.js'

import {FullscreenOutlined, FullscreenExitOutlined, ExclamationCircleOutlined} from '@ant-design/icons';
import "./header.less"
const { confirm } = Modal;


class Header extends Component {
  state = {
    isFull: false,
    date: dayjs().format('YYYY年 MM月DD日 HH:mm:ss'),
    weatherInfo: '',
    childrenTitle: ''
  };
  
  render() {
    let {isFull, date, weatherInfo, childrenTitle} = this.state
    let {userInfo, title} = this.props
    return <header className="header">
      <div className="header_top">
        <Button size="small" onClick={this.fullScreen}>
          { isFull ? <FullscreenExitOutlined /> : <FullscreenOutlined /> }
        </Button>
        <span className="text">欢迎，{userInfo.user.username}</span>
        <Button type="link" size="small" onClick={this.logout}>退出登录</Button>
      </div>
      <div className="header_bottom">
        <div className="header_bottom_left">
          {/* 获取标题*/}
          {title || childrenTitle}
        </div>
        <div className="header_bottom_right">
          <span>{date}</span>
          <img src="http://api.map.baidu.com/images/weather/day/qing.png" alt="天气图标"/>
          <span>{weatherInfo}</span>
        </div>
      </div>
    </header>
  }
  
  componentDidMount() {
    // 切换页面全屏，修改isFull状态
    if (screenfull.isEnabled) {
      screenfull.on('change', () => {
        let isFull = !this.state.isFull
        this.setState({isFull})
      });
    }
    
    // 每秒获取一次日期
    this.timeID = setInterval(()=>{
      this.setState({
        date: dayjs().format('YYYY年 MM月DD日 HH:mm:ss')
      })
    },1000)

    // 获取天气数据
    this.getWeather()
  
    // 获取标题
    this.getTitle()
  }
  
  // 正则匹配路径是否包含
  re = (item) => {
    let re = new RegExp(item.path)
    if (re.test(this.props.location.pathname)){
      this.setState({
        childrenTitle: item.title
      })
    }
  }
  
  // 获取标题
  getTitle = () => {
    MenuData.forEach(item => {
      if (item.children) {
        item.children.find(citem => {
          return this.re(citem)
        })
      } else {
        this.re(item)
      }
    })
  }
  
  // 生命周期结束，关闭定时器
  componentWillUnmount() {
    clearInterval(this.timeID)
  }
  
  // 退出登录
  logout = () => {
    confirm({
      title: '确定退出?',
      icon: <ExclamationCircleOutlined />,
      content: '退出登录之后，需要重新输入用户名、密码才能登录网站',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        this.props.deleteUserInfo()
      },
    });
  }
  
  // 获取天气数据
  getWeather = async () => {
    let weatherInfo = await weather()
    this.setState({
      weatherInfo: weatherInfo.data.forecast[0].type
    })
    
  }
  
  // 全屏
  fullScreen = () => {
    if (screenfull.isEnabled) {
      screenfull.toggle();
    }
  }
}

export default withRouter(connect(
  state => ({userInfo: state.userInfo,title:state.leftMenuTitle}),
  {deleteUserInfo: createDeleteUserInfoAction}
)(Header))

